<template>
  <div class="project-item">
    <div class="list">
      <div
        @click="toDetail(item)"
        v-for="(item, index) in list"
        :key="index"
        class="item"
      >
        <div :style="{ background: item.bg }" class="cover">
          <img :src="item.cover" alt="" />
        </div>
        <div class="info">
          <div class="left">
            <p>{{ item.name }}</p>
            <p>{{ item.introduce }}</p>
          </div>
          <div :class="['right', { active: item.isPraise == 1 }]">
            <div>
              <svg-icon icon-class="like-fill" />
            </div>
            <p>
              给个支持
              <span v-if="item.praiseNum > 0">
                (
                {{
                  item.praiseNum < 10 ? "0" + item.praiseNum : item.praiseNum
                }}
                {{ item.praiseNum > 99 ? "+" : "" }})
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ColorThief from "colorthief";

export default {
  name: "WorkspaceJsonProjectItem",

  props: {
    lists: {
      default: "",
    },
  },
  data() {
    return {
      list: [],
    };
  },
  watch: {
    lists: {
      deep: true,
      immediate: true,
      async handler() {
        for (let item of this.lists) {
          const img = new Image();
          img.crossOrigin = "Anonymous";
          img.src = item.cover;
          await new Promise((resolv, reject) => {
            img.onload = resolv;
          });
          const colorThief = new ColorThief();
          let color = colorThief.getPalette(img, 3);
          item.bg = `rgba(${color[0].join(",")},.9)`;
          this.list.push(item);
        }
      },
    },
  },
  mounted() {},
  methods: {
    toDetail(item) {
      console.log({ articleId: item.articleId, projectId: item.projectId });
      this.$router.push({
        name: "projectDetail",
        params: {
          articleId: item.articleId,
          projectId: item.projectId,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.project-item {
}
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  .item {
    width: 320px;
    background: #fff;
    margin: 0 20px 20px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
    border: 2px solid #fff;
    .cover {
      height: 140px;
      text-align: center;
      background: #192d2d;
      position: relative;
      img {
        width: auto;
        height: 100%;
        position: relative;
        z-index: 9;
      }

      &:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 2;
      }
    }
    .info {
      padding: 20px 10px;
      display: flex;
      .left {
        flex: 1;
        padding-right: 10px;
        p {
          &:nth-child(2) {
            font-size: 12px;
            color: #999;
            margin-top: 4px;
          }
        }
      }
      .right {
        text-align: center;
        position: relative;
        padding-left: 20px;
        color: #999;

        &::before {
          content: "";
          width: 1px;
          height: 70%;
          background: #f5f5f5;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
        p {
          font-size: 12px;
          margin-top: 5px;
        }
      }
      .active {
        color: rgba(46, 188, 60, 1);
        p {
          color: rgba(46, 188, 60, 1);
        }
      }
    }
  }
}
</style>
